<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>06_浮动后的小练习</title>
    <style>
        *

        .outer {
            height: 80px;
            text-align: center;
            line-height: 70px;
        }

        .box {
            background-color: rgba(128, 128, 128, 0.29);
            float: left;
            margin: 5px;
            height: 7;
        }

        .box1 {
            width: 200px;

        }

        .box2 {
            width: 540px;
        }

        .box3 {
            width: 200px;
        }

        .menu {
            width: 960px;
            height: 30px;
            background-color: rgba(128, 128, 128, 0.29);
            text-align: center;
            margin-left: 5px;
            line-height: 30px;
        }

        .column {
            width: 800px;
            text-align: center;
            line-height: 100px;
        }

        .column1,
        .column2 {
            width: 375px;
            height: 200px;
            border: 2px solid black;
            float: left;
            margin: 5px;
        }

        .column3,
        .column4,
        .column5,
        .column6 {
            width: 180px;
            height: 200px;
            border: 2px solid black;
            float: left;
            margin: 5px;
        }

        .column::after {
            content: "";
            display: block-line;
            clear: left;

        }

        .column7,
        .column8,
        .column9 {
            width: 180px;
            height: 130px;
            border: 2px solid black;
            text-align: center;
            margin: 4px;
            line-height: 70px;
            display: inline-block;
        }

        .footer {
            width: 960px;
            height: 60px;
            background-color: rgba(128, 128, 128, 0.29);
            text-align: center;
            margin: 5px;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
    </div>
    <div class="menu">菜单</div>
    <div class="column">
        <div class="column1">栏目1</div>
        <div class="column2">栏目2</div>
        <div class="column3">栏目3</div>
        <div class="column4">栏目4</div>
        <div class="column5">栏目5</div>
        <div class="column6">栏目6</div>
    </div>
    <div>
        <div class="column7">栏目7</div>
        <div class="column8">栏目8</div>
        <div class="column9">栏目9</div>
    </div>
    <div class="footer">页脚</div>

</body>

</html>